<script lang="ts" setup>
import type { Album } from '@/types/artist'
import { useFormat } from '@/hooks/useFormat'
import { PlayOne, Like, More } from '@icon-park/vue-next'
const { formatFullTimeStamp } = useFormat()

defineProps<{ info: Album }>()
</script>

<template>
  <div class="flex">
    <img class="w-44 h-44 object-cover rounded-xl flex-shrink-0" :src="info.picUrl" alt="" />
    <div class="flex flex-col justify-between pl-4">
      <div class="flex items-start flex-col justify-between flex-1 pb-4">
        <div class="text-2xl font-bold">{{ info.name }}</div>
        <div class="text-xs text-gray-600">{{ info.artist?.name }}</div>
        <div class="text-xs text-gray-600">{{ formatFullTimeStamp(info.publishTime) }}</div>
      </div>
      <div>
        <el-button round :icon="PlayOne">播放全部</el-button>
        <el-button round :icon="Like">收藏</el-button>
        <el-button round :icon="More"></el-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
